import React from 'react';
import { Switch, Redirect } from 'react-router-dom';
import PrivateRoute from '@/components/PrivateRoute';
import { HomeOutlined, MailOutlined, ExclamationCircleOutlined, SettingOutlined, TableOutlined } from '@ant-design/icons';


import Home from '@/pages/Home';
import Tables from '@/pages/Tables';
import Page403 from '@/pages/Other/page403';
import Page404 from '@/pages/Other/page404';
import Page500 from '@/pages/Other/page500';
import About from '@/pages/About';
import System from '@/pages/System';


export const menus = [
	{
		title: '首页',
		icon: <HomeOutlined />,
		key: '/Home',
		component: Home
	},
	{
		title: '表格组件',
		icon: <TableOutlined />,
		key: '/Tables',
		component: Tables
	},
	{
		title: '其它',
		icon: <MailOutlined />,
		key: '/Home/Other',
		subs: [
			{ key: '/403', title: '403', component: Page403 },
			{ key: '/404', title: '404', component: Page404 },
			{ key: '/500', title: '500', component: Page500 },
		]
	},
	{
		title: '设置',
		icon: <SettingOutlined />,
		key: '/System',
		component: System
	},
	{
		title: '关于',
		icon: <ExclamationCircleOutlined />,
		key: '/About',
		component: About
	}
];

const MenuRoutes = () => {
	return (
		<Switch>
			{generateRoutes(menus)}
			<Redirect exact from="/" to="/Home" />
		</Switch>
	);
};

function generateRoutes(data, result = []) {
	data.forEach((item, index) => {
		if (item.component) {
			result.push(<PrivateRoute exact path={item.key} key={index} component={item.component} />);
		}
		if (item.subs) {
			generateRoutes(item.subs, result);
		}
	});
	return result;
}

export default MenuRoutes;